<template>

  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">
      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="sampleQuery.sampleType" placeholder="样片类型"  /></a-col>
        <a-col :span="2" class="row"><a-input v-model="sampleQuery.apply" placeholder="适用范围" /></a-col>
        <a-col :span="2" class="row"><a-input v-model="sampleQuery.title" placeholder="样片标题" /></a-col>
        <a-col :span="2" class="row"><a-input v-model="sampleQuery.address" placeholder="拍摄地点" /></a-col>
        <a-col :span="2" class="row"><a-input v-model="sampleQuery.uploader" placeholder="上传人" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="sampleQuery.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>
    </a-space>


    <a-table :data="data" row-key="id" :row-selection="selectList"
             :scroll="scroll" :scrollbar="scrollbar"
             v-model:selectedKeys="selectList" :pagination="false"
             style="background-color: white;">
      <template #columns>
        <a-table-column title="编号" data-index="id"></a-table-column>
        <a-table-column :ellipsis="true" title="类型" data-index="sampleType"></a-table-column>
        <a-table-column :ellipsis="true" title="标题" data-index="title"></a-table-column>
        <a-table-column title="封面图片" >
          <template #cell="{record}">
            <a-image
                height="120"
                width="120"
                :src="url + record.file[0].clientUrl"
            />
          </template>
        </a-table-column>
        <a-table-column title="状态" data-index="status">
          <template #cell="{record}">
            <a-tag v-if="record.status === 1" color="green">上架</a-tag>
            <a-tag v-else color="red">下架</a-tag>
          </template>
        </a-table-column>
        <a-table-column title="操作">
          <template #cell="{record}">
            <a-button type="text" @click="select(record)">选择</a-button>
          </template>
        </a-table-column>
      </template>

      <template #footer>
        <a-pagination v-model:current="sampleQuery.pageNum" :total="sampleQuery.total"
                      v-model:page-size="sampleQuery.pageSize" @page-size-change="getList"
                      @change="getList"
                      show-total show-jumper show-page-size/>
      </template>
    </a-table>


  </div>

</template>

<script lang="ts" setup>


import type {SampleDto, SampleQuery} from "@/apis/sample";
import type {Reactive} from "vue-demi";
import {ref} from 'vue';
import type {Ref} from "vue-demi";
import {deleteSample, queryById, querySampleList} from "@/apis/sample";
import {useUserStore} from "@/stores";


const selectList = ref([])
const data:Ref<SampleDto[]> = ref([])
const visible = ref(false);

const url = import.meta.env.VITE_API_BASE_URL

const scrollbar = ref(true);
const scroll = {
  x: 1200,
  y: 700
};



const sampleQuery:Reactive<SampleQuery> = reactive({
  id:null,
  sampleType:'',
  apply:'',
  title:'',
  updateTime:'',
  address:'',
  uploader:'',
  status:null,
  photographer:'',
  pageNum:1,
  pageSize:10,
  total:0
})

const sampleDto:Reactive<SampleDto> = reactive({
  id:0,
  sampleType:'',
  apply:'',
  frontCover:'',
  title:'',
  updateTime:'',
  address:'',
  uploader:useUserStore().userInfo.id,
  model:'',
  description:'',
  clothing:'',
  cameraModel:'',
  cameraLens:'',
  aperture:'',
  shutter:'',
  cameraIso:'',
  photographer:'',
  status:null
})


const flat = defineEmits(['select'])

/**
 * 选择按钮
 * */
const select = (data:any) => {

  flat('select',data)

}


/**
 * 获得列表
 * */
const getList =  () => {
  querySampleList(sampleQuery).then(res => {
    data.value = res.data["data"].records
    sampleQuery.total = res.data["data"].total
  })
}



getList()

</script>

<style lang="scss" scoped>
.group {
  .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
}

.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>